---
layout: layouts/base.njk
---

<header class="header">
    <div class="container">
        <div class="header__logo">
            <img src="/assets/logo.png" height="256" width="256" alt="1 LOC" />
        </div>
        <h1 class="header__heading">{{ title }}</h1>
    </div>

    <div class="header__github">
        <a
            href="https://github.com/phuoc-ng/1loc/blob/master/collections/{{ category | lower }}/{{ page.fileSlug }}.md"
            rel="noopener noreferrer"
            target="_blank"
        >
            Fix a typo
        </a>
    </div>
</header>

<div class="container">
    <div class="post__inner">
        <main class="post__content">
            {{ content | safe }}
        </main>

        {% set randomProducts = products | randomItems(1) | sortBy('name') %}
        {% for product in randomProducts %}
        {% include "_product.njk" %}
        {% endfor %}
    </div>

    <div class="post__nav">
        <div class="post__prev">
        {% if prevPost %}
            <div class="card">
                <div>←</div>
                <a href="{{ prevPost.url }}">{{ prevPost.data.title }}</a>
            </div>
        {% endif %}
        </div>

        <div class="post__next">
        {% if nextPost %}        
            <div class="card">
                <div>→</div>
                <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>
            </div>
        {% endif %}
        </div>
    </div>
</div>